<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>首页</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/admin.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/hmstyle.css" rel="stylesheet" type="text/css"/>
	<link href="static/css/skin.css" rel="stylesheet" type="text/css" />
	<script src="static/js/jquery.min.js"></script>
	<script src="static/js/amazeui.min.js"></script>

</head>

<body >
<div class="hmtop" id="container">
		<!--顶部导航条 -->
		<div class="am-container header" >
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-if="isLogin">
						{{username}},欢迎您
					</div>
					<div class="menu-hd" v-else>
						亲，请<a href="login.html" target="_top" class="h">登录</a>
						<a href="#" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
				</div>
			</ul>
		</div>
		<!--悬浮搜索框-->
		<div class="nav white">
			<div class="logoBig">
				<img src="static/images/logo.png" style="margin-left: 0px;height: 75px">
			</div>

			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form action="search.html">
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
				</form>
			</div>
		</div>
		<div class="clear"></div>

		<div class="banner">
			<!--轮播 -->
			<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
				<ul class="am-slides">
					<li v-for="img,index in indexImgs" :class="'banner'+(index+1)">
						<a><img :src="'static/images/'+img.imgUrl" /></a>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="shopNav">
			<div class="slideall">

				<div class="long-title"><span class="all-goods">全部分类</span></div>
				<div class="nav-cont">
					<ul>
						<li class="index"><a href="#">首页</a></li>
						<li class="qc"><a href="#">闪购</a></li>
						<li class="qc"><a href="#">限时抢</a></li>
						<li class="qc"><a href="#">团购</a></li>
						<li class="qc last"><a href="#">大包装</a></li>
					</ul>
				</div>

				<!--侧边导航 -->
				<div id="nav" class="navfull">
					<div class="area clearfix">
						<div class="category-content" id="guide_2">

							<div class="category">
								<ul class="category-list" id="js_climit_li">
									<li v-for="c1 in categories" class="appliance js_toggle relative">
										<div class="category-info">
											<h3 class="category-name b-category-name">
												<i><img :src="'static/images/'+c1.categoryIcon"></i>
												<a class="ml-22" :title="c1.categoryName">{{c1.categoryName}}</a>
											</h3>
											<em>&gt;</em>
										</div>
										<!--一级分类下的二级分类-->
										<div class="menu-item menu-in top">
											<div class="area-in">
												<div class="area-bg">
													<div class="menu-srot">
														<div class="sort-side">
															<!--每个dl代表一个二级分类-->
															<dl class="dl-sort" v-for="c2 in c1.categories">
																<dt><span :title="c2.categoryName">{{c2.categoryName}}</span></dt>
																<dd v-for="c3 in c2.categories">
																	<a :title="c3.categoryName" :href="'search.html?cid='+c3.categoryId"><span>{{c3.categoryName}}</span></a>
																</dd>
															</dl>
														</div>

													</div>
												</div>
											</div>
										</div>
										<b class="arrow"></b>
									</li>
								</ul>
							</div>
						</div>

					</div>
				</div>


				<!--轮播-->
				<script type="text/javascript">
					$(document).ready(function() {
						//让分类列表“动起来”
						$("li").hover(function() {
							$(".category-content .category-list li.first .menu-in").css("display", "none");
							$(".category-content .category-list li.first").removeClass("hover");
							$(this).addClass("hover");
							$(this).children("div.menu-in").css("display", "block")
						}, function() {
							$(this).removeClass("hover")
							$(this).children("div.menu-in").css("display", "none")
						});
					})
				</script>



				<!--小导航 -->
<!--				<div class="am-g am-g-fixed smallnav">-->
<!--					<div class="am-u-sm-3">-->
<!--						<a href="sort.html"><img src="static/images/navsmall.jpg" />-->
<!--							<div class="title">商品分类</div>-->
<!--						</a>-->
<!--					</div>-->
<!--					<div class="am-u-sm-3">-->
<!--						<a href="#"><img src="static/images/huismall.jpg" />-->
<!--							<div class="title">大聚惠</div>-->
<!--						</a>-->
<!--					</div>-->
<!--					<div class="am-u-sm-3">-->
<!--						<a href="#"><img src="static/images/mansmall.jpg" />-->
<!--							<div class="title">个人中心</div>-->
<!--						</a>-->
<!--					</div>-->
<!--					<div class="am-u-sm-3">-->
<!--						<a href="#"><img src="static/images/moneysmall.jpg" />-->
<!--							<div class="title">投资理财</div>-->
<!--						</a>-->
<!--					</div>-->
<!--				</div>-->

				<!--走马灯 -->

<!--				<div class="marqueen">-->
<!--					<span class="marqueen-title">商城头条</span>-->
<!--					<div class="demo">-->

<!--						<ul>-->
<!--							<li class="title-first"><a target="_blank" href="#">-->
<!--								<img src="static/images/TJ2.jpg"></img>-->
<!--								<span>[特惠]</span>商城爆品1分秒-->
<!--							</a></li>-->
<!--							<li class="title-first"><a target="_blank" href="#">-->
<!--								<span>[公告]</span>商城与广州市签署战略合作协议-->
<!--								<img src="static/images/TJ.jpg"></img>-->
<!--								<p>XXXXXXXXXXXXXXXXXX</p>-->
<!--							</a></li>-->

<!--							<div class="mod-vip">-->
<!--								<div class="m-baseinfo" v-if="isLogin">-->
<!--									<a href="person/index.html">-->
<!--										<img :src="'static/'+userimg">-->
<!--									</a>-->
<!--									<em>-->
<!--										Hi,<span class="s-name">{{username}}</span>-->
<!--										<a href="#"><p>点击更多优惠活动</p></a>-->
<!--									</em>-->
<!--								</div>-->
<!--								<div class="member-logout" v-else>-->
<!--									<a class="am-btn-warning btn" href="login.html">登录</a>-->
<!--									<a class="am-btn-warning btn" href="register.html">注册</a>-->
<!--								</div>-->
<!--								<div class="member-login">-->
<!--									<a href="#"><strong>0</strong>待收货</a>-->
<!--									<a href="#"><strong>0</strong>待发货</a>-->
<!--									<a href="#"><strong>0</strong>待付款</a>-->
<!--									<a href="#"><strong>0</strong>待评价</a>-->
<!--								</div>-->
<!--								<div class="clear"></div>-->
<!--							</div>-->

<!--							<li><a target="_blank" href="search.html"><span>[特惠]</span>洋河年末大促，低至两件五折</a></li>-->
<!--							<li><a target="_blank" href="search.html"><span>[公告]</span>华北、华中部分地区配送延迟</a></li>-->
<!--							<li><a target="_blank" href="search.html"><span>[特惠]</span>家电狂欢千亿礼券 买1送1！</a></li>-->

<!--						</ul>-->
<!--						<div class="advTip"><img src="static/images/advTip.jpg"/></div>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="clear"></div>-->
			</div>
			<script type="text/javascript">
				if ($(window).width()<640) {
					function autoScroll(obj) {
						$(obj).find("ul").animate({
							marginTop: "-39px"
						}, 500, function() {
							$(this).css({
								marginTop: "0px"
							}).find("li:first").appendTo(this);
						})
					}
					$(function() {
						setInterval('autoScroll(".demo")', 3000);
					})
				}
			</script>
			
			<div class="shopMainbg">
				<div class="shopMain" id="shopmain">

					<!--今日推荐 -->
					<div class="am-g am-g-fixed recommendation">
						<div class="clock am-u-sm-3">
							<img src="static/images/2016.png" style="border-radius: 50%;"></img>
							<p>新品<br>推荐</p>
						</div>
						<a v-for="rp in recommendProducts" :href="'introduction.html?pid='+rp.productId">
							<div class="am-u-sm-4 am-u-lg-3 ">
								<div class="info ">
									<h3>{{rp.productName}}</h3>
									<h4>销量：{{rp.soldNum}}</h4>
								</div>
								<div class="recommendationMain one">
									<img :src="'static/pimgs/'+rp.imgs[0].url"></img>
								</div>
							</div>
						</a>
					</div>
					<div class="clear "></div>
					<!--热门活动 -->

					<div class="am-container activity ">
						<div class="shopTitle ">
							<h4>活动</h4>
							<h3>每期活动 优惠享不停 </h3>
							<span class="more ">
                              <a href="# ">全部活动<i class="am-icon-angle-right" style="padding-left:10px ;" ></i></a>
                        </span>
						</div>
						<div class="am-g am-g-fixed ">
							<div class="am-u-sm-3 ">
								<div class="icon-sale one "></div>
								<h4>秒杀</h4>
								<div class="activityMain ">
									<img src="static/images/activity1.jpg "></img>
								</div>
								<div class="info ">
									<h3>春节送礼优选</h3>
								</div>
							</div>

							<div class="am-u-sm-3 ">
								<div class="icon-sale two "></div>
								<h4>特惠</h4>
								<div class="activityMain ">
									<img src="static/images/activity2.jpg "></img>
								</div>
								<div class="info ">
									<h3>春节送礼优选</h3>
								</div>
							</div>

							<div class="am-u-sm-3 ">
								<div class="icon-sale three "></div>
								<h4>团购</h4>
								<div class="activityMain ">
									<img src="static/images/activity3.jpg "></img>
								</div>
								<div class="info ">
									<h3>春节送礼优选</h3>
								</div>
							</div>

							<div class="am-u-sm-3 last ">
								<div class="icon-sale "></div>
								<h4>超值</h4>
								<div class="activityMain ">
									<img src="static/images/activity.jpg "></img>
								</div>
								<div class="info ">
									<h3>春节送礼优选</h3>
								</div>
							</div>

						</div>
					</div>
					<div class="clear "></div>

					<template v-for="rc,index in recommendCategories">
						<div v-if="rc.products.length > 0" :id="'f'+(index+1)">
							<!--甜点-->
							<div class="am-container ">
								<div class="shopTitle ">
									<h4>{{rc.categoryName}}</h4>
									<h3>{{rc.categorySlogan}}</h3>
									<span class="more ">
		                    <a href="# ">更多美味<i class="am-icon-angle-right" style="padding-left:10px ;" ></i></a>
		                        </span>
								</div>
							</div>
							<div class="am-g am-g-fixed floodFour">
								<div class="am-u-sm-5 am-u-md-4 text-one list ">
									<div class="word">
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
<!--										<a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>-->
									</div>
									<a href="# ">
										<div class="outer-con ">
											<div class="title ">
												开抢啦！
											</div>
											<div class="sub-title ">
												零食大礼包
											</div>
										</div>
										<img :src="'static/images/'+rc.categoryPic" />
									</a>
									<div class="triangle-topright"></div>
								</div>

								<div class="am-u-sm-7 am-u-md-4 text-two sug" v-if="rc.products.length > 0">
									<div class="outer-con ">
										<div class="title ">{{rc.products[0].productName}}</div>
										<div class="sub-title ">
											销量：{{rc.products[0].soldNum}}
										</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[0].imgs[0].url" /></a>
								</div>

								<div class="am-u-sm-7 am-u-md-4 text-two" v-if="rc.products.length > 1">
									<div class="outer-con ">
										<div class="title ">{{rc.products[1].productName}}</div>
										<div class="sub-title ">
											销量：{{rc.products[1].soldNum}}
										</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[1].imgs[0].url" /></a>
								</div>


								<div class="am-u-sm-3 am-u-md-2 text-three big"  v-if="rc.products.length > 2">
									<div class="outer-con ">
										<div class="title ">{{rc.products[2].productName}}</div>
										<div class="sub-title ">销量：{{rc.products[2].soldNum}}</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[2].imgs[0].url" /></a>
								</div>

								<div class="am-u-sm-3 am-u-md-2 text-three sug" v-if="rc.products.length > 3">
									<div class="outer-con ">
										<div class="title ">{{rc.products[3].productName}}</div>
										<div class="sub-title ">销量：{{rc.products[3].soldNum}}</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[3].imgs[0].url" /></a>
								</div>

								<div class="am-u-sm-3 am-u-md-2 text-three " v-if="rc.products.length > 4">
									<div class="outer-con ">
										<div class="title ">{{rc.products[4].productName}}</div>
										<div class="sub-title ">销量：{{rc.products[4].soldNum}}</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[4].imgs[0].url" /></a>
								</div>

								<div class="am-u-sm-3 am-u-md-2 text-three last big " v-if="rc.products.length > 5">
									<div class="outer-con ">
										<div class="title ">{{rc.products[5].productName}}</div>
										<div class="sub-title ">销量：{{rc.products[5].soldNum}}</div>
										<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
									</div>
									<a href="# "><img :src="'static/pimgs/'+rc.products[5].imgs[0].url" /></a>
								</div>

							</div>
							<div class="clear "></div>
						</div>
					</template>



					<div class="footer ">
						<div class="footer-hd ">
							<p>
								<a href="# ">海淘宝商城</a>
								<b>|</b>
								<a href="# ">商城首页</a>
								<b>|</b>
								<a href="# ">支付宝</a>
								<b>|</b>
								<a href="# ">物流</a>
							</p>
						</div>
						<div class="footer-bd ">
							<p>
								<a href="# ">关于海淘宝</a>
								<a href="# ">合作伙伴</a>
								<a href="# ">联系我们</a>
								<a href="# ">网站地图</a>
								<em>©haitaobao 版权所有</em>
							</p>
						</div>
					</div>


					<!--引导 -->
					<div class="navCir">
						<li class="active"><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
						<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
						<li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
						<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
					</div>


					<!--菜单 -->
					<div class=tip>
						<div id="sidebar">
							<div id="wrap">
								<div id="prof" class="item ">
									<a href="# ">
										<span class="setting "></span>
									</a>
									<div class="ibar_login_box status_login ">
										<div class="avatar_box ">
											<p class="avatar_imgbox "><img :src="userimg" /></p>
											<ul class="user_info ">
												<li>{{username}}</li>
												<li>普通会员</li>
											</ul>
										</div>
										<div class="login_btnbox ">
											<a href="# " class="login_order ">我的订单</a>
											<a href="# " class="login_favorite ">我的收藏</a>
										</div>
										<i class="icon_arrow_white "></i>
									</div>

								</div>
								<div id="shopCart " class="item ">
									<a href="# ">
										<span class="message "></span>
									</a>
									<p>
										购物车
									</p>
									<p class="cart_num ">0</p>
								</div>
								<div id="asset " class="item ">
									<a href="# ">
										<span class="view "></span>
									</a>
									<div class="mp_tooltip ">
										我的资产
										<i class="icon_arrow_right_black "></i>
									</div>
								</div>

								<div id="foot " class="item ">
									<a href="# ">
										<span class="zuji "></span>
									</a>
									<div class="mp_tooltip ">
										我的足迹
										<i class="icon_arrow_right_black "></i>
									</div>
								</div>

								<div id="brand " class="item ">
									<a href="#">
										<span class="wdsc "><img src="static/images/wdsc.png " /></span>
									</a>
									<div class="mp_tooltip ">
										我的收藏
										<i class="icon_arrow_right_black "></i>
									</div>
								</div>

								<div id="broadcast " class="item ">
									<a href="# ">
										<span class="chongzhi "><img src="static/images/chongzhi.png " /></span>
									</a>
									<div class="mp_tooltip ">
										我要充值
										<i class="icon_arrow_right_black "></i>
									</div>
								</div>

								<div class="quick_toggle ">
									<li class="qtitem ">
										<a href="# "><span class="kfzx "></span></a>
										<div class="mp_tooltip ">客服中心<i class="icon_arrow_right_black "></i></div>
									</li>
									<!--二维码 -->
									<li class="qtitem ">
										<a href="#none "><span class="mpbtn_qrcode "></span></a>
										<div class="mp_qrcode " style="display:none; "><img src="static/images/weixin_code_145.png " /><i class="icon_arrow_white "></i></div>
									</li>
									<li class="qtitem ">
										<a href="#top " class="return_top "><span class="top "></span></a>
									</li>
								</div>

								<!--回到顶部 -->
								<div id="quick_links_pop " class="quick_links_pop hide "></div>

							</div>

						</div>
						<div id="prof-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								我
							</div>
						</div>
						<div id="shopCart-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								购物车
							</div>
						</div>
						<div id="asset-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								资产
							</div>

							<div class="ia-head-list ">
								<a href="# " target="_blank " class="pl ">
									<div class="num ">0</div>
									<div class="text ">优惠券</div>
								</a>
								<a href="# " target="_blank " class="pl ">
									<div class="num ">0</div>
									<div class="text ">红包</div>
								</a>
								<a href="# " target="_blank " class="pl money ">
									<div class="num ">￥0</div>
									<div class="text ">余额</div>
								</a>
							</div>

						</div>
						<div id="foot-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								足迹
							</div>
						</div>
						<div id="brand-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								收藏
							</div>
						</div>
						<div id="broadcast-content " class="nav-content ">
							<div class="nav-con-close ">
								<i class="am-icon-angle-right am-icon-fw "></i>
							</div>
							<div>
								充值
							</div>
						</div>
					</div>

				</div>
			</div>
			<script>
				window.jQuery || document.write('&lt;script src="static/js/jquery.min.js ">&lt;\/script>');
			</script>
			<script type="text/javascript " src="static/js/quick_links.js "></script>
			<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
			<script type="text/javascript" src="static/js/vue.js" ></script>
			<script type="text/javascript" src="static/js/axios.min.js" ></script>
			<script type="text/javascript">
				var baseUrl="http://127.0.01:8080/haitaobao/index";
				var vm=new Vue({
					el:"#container",
					data:{
						username:"",
						userimg:"",
						isLogin:false,
						indexImgs:[],
						categories:[],
						recommendProducts:[],
						recommendCategories:[]
					},
					created:function(){
						//从cookie中获取token,username,userimg
						var token=getCookieValue("token");
						if(token!=null || token!=""){
							this.isLogin=true;
							this.username=getCookieValue("username");
							this.userimg=getCookieValue("userimg");
						};

						//获取轮播图数据
						var indexImgUrl=baseUrl+"/getIndexImgList";
						axios.get(indexImgUrl).then((res)=>{
							this.indexImgs=res.data.data;
							//渲染轮播图
							//初始化轮播图动画效果
							setTimeout(function(){
								$('.am-slider').flexslider();
							},100)
						});

						//获取分类列表内容
						var getCategoriesListUrl=baseUrl+"/getCategories";
						axios.get(getCategoriesListUrl).then((res)=>{
							this.categories=res.data.data;
							//初始化分类列表的动画效果
							setTimeout(function(){
								$(document).ready(function() {
									//让分类列表“动起来”
									$("li").hover(function() {
										$(".category-content .category-list li.first .menu-in").css("display", "none");
										$(".category-content .category-list li.first").removeClass("hover");
										$(this).addClass("hover");
										$(this).children("div.menu-in").css("display", "block")
									}, function() {
										$(this).removeClass("hover")
										$(this).children("div.menu-in").css("display", "none")
									});
								});
							},100);
						});

						//获取商品推荐信息
						var getRecommendProductListUrl=baseUrl+"/getRecommendProductList";
						axios.get(getRecommendProductListUrl).then((res)=>{
							this.recommendProducts=res.data.data;
						});

						//获得各一级分类下的销量最高的各6个商品
						var getMaxSoldNumProductsUrl=baseUrl+"/getMaxSoldNumProducts";
						axios.get(getMaxSoldNumProductsUrl).then((res)=>{
							this.recommendCategories=res.data.data;
						});
					}
				})
			</script>
		</div>
</div>
</body>
</html>